<template>
  <!-- 这个是就医指南的页面 -->
  <div class="guide-container">
    <header class="guide-header">
      <h1>医院就医指南</h1>
      <p class="hospital-info">三级甲等综合医院 · 医保定点单位</p>
    </header>
    <!-- 公告栏 -->
    <div class="announcement">
      <van-notice-bar
          left-icon="volume-o"
          :scrollable="true"
          speed='50'
          text="门诊时间：周一至周日 8:00-12:00 14:00-17:30 急诊24小时开放" />
    </div>

    <!-- 快速导航 -->
    <div class="quick-nav">
      <van-grid :border="false" :column-num="4">
        <van-grid-item icon="calendar-o" text="预约挂号" @click="scrollTo('process')" />
        <van-grid-item icon="cluster-o" text="科室导航" @click="scrollTo('department')" />
        <van-grid-item icon="question-o" text="常见问题" @click="scrollTo('faq')" />
        <van-grid-item icon="balance-list-o" text="医保政策" @click="scrollTo('insurance')" />
      </van-grid>
    </div>

    <!-- 就医流程 -->
    <div class="section" id="process">
      <div class="section-header">
        <van-icon name="description" class="section-icon" />
        <h2>就医流程</h2>
      </div>
      <div class="process-steps">
        <van-steps direction="vertical" :active="activeStep">
          <van-step>
            <h3>1. 预约挂号</h3>
            <div class="step-content">
              <p>通过以下方式预约：</p>
              <ul>
                <li>医院微信公众号</li>
                <li>医院APP</li>
                <li>官网在线预约</li>
                <li>电话预约 (0755-12345678)</li>
              </ul>
            </div>
          </van-step>
          <van-step>
            <h3>2. 门诊就诊</h3>
            <div class="step-content">
              <p>就诊当日：</p>
              <ol>
                <li>按预约时间提前30分钟到院</li>
                <li>自助机取号/缴费</li>
                <li>前往对应科室候诊区</li>
                <li>等待叫号系统呼叫</li>
              </ol>
            </div>
          </van-step>
          <van-step>
            <h3>3. 检查检验</h3>
            <div class="step-content">
              <p>如需检查：</p>
              <ol>
                <li>医生开具检查单</li>
                <li>缴费（可手机/自助机/窗口）</li>
                <li>按指引前往检查科室</li>
                <li>等待检查结果（时间视项目而定）</li>
              </ol>
            </div>
          </van-step>
          <van-step>
            <h3>4. 复诊取药</h3>
            <div class="step-content">
              <p>完成检查后：</p>
              <ol>
                <li>持结果返回诊室复诊</li>
                <li>医生诊断并开具处方</li>
                <li>缴费（可手机/自助机/窗口）</li>
                <li>凭取药单到药房取药</li>
              </ol>
            </div>
          </van-step>
        </van-steps>
      </div>
      <div class="tips">
        <van-icon name="info-o" />
        <span>温馨提示：请携带身份证/医保卡和既往病历资料</span>
      </div>
    </div>

    <!-- 科室导航 -->
    <div class="section" id="department">
      <div class="section-header">
        <van-icon name="cluster-o" class="section-icon" />
        <h2>科室导航</h2>
      </div>
      <div class="dept-category">
        <van-collapse v-model="activeDept" accordion>
          <van-collapse-item
              v-for="dept in filteredDepartments"
              :key="dept.id"
              :title="dept.name"
              :name="dept.id"
          >
            <van-cell
                v-for="sub in dept.children"
                :key="sub.id"
                :title="sub.name"
                :label="sub.intro"
                :title-style="{ fontWeight: 'bold' }"
            >
            </van-cell>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="section" id="faq">
      <div class="section-header">
        <van-icon name="question-o" class="section-icon" />
        <h2>常见问题</h2>
      </div>
      <van-collapse v-model="activeFaq">
        <van-collapse-item title="如何挂号？" name="1">
          <p>1. 关注医院微信公众号，点击"预约挂号"</p>
          <p>2. 下载医院APP进行预约</p>
          <p>3. 拨打预约电话：0755-12345678</p>
          <p>4. 现场自助机挂号（号源有限）</p>
        </van-collapse-item>
        <van-collapse-item title="如何退号？" name="2">
          <p>1. 就诊日前一天23:00前可通过原渠道免费退号</p>
          <p>2. 就诊日当天需到医院窗口办理退号</p>
          <p>3. 已过号患者需先到分诊台重新排号</p>
        </van-collapse-item>
        <van-collapse-item title="医保如何报销？" name="3">
          <p>1. 持医保卡/电子医保凭证到院就诊</p>
          <p>2. 缴费时主动出示医保凭证</p>
          <p>3. 系统自动结算医保部分费用</p>
          <p>4. 只需支付自费部分</p>
        </van-collapse-item>
        <van-collapse-item title="检查报告如何获取？" name="4">
          <p>1. 手机端：医院公众号/APP查询</p>
          <p>2. 自助机：凭就诊卡打印报告</p>
          <p>3. 检验科窗口：凭条码领取</p>
        </van-collapse-item>
      </van-collapse>
    </div>

    <!-- 医保政策 -->
    <div class="section" id="insurance">
      <div class="section-header">
        <van-icon name="balance-list-o" class="section-icon" />
        <h2>医保政策</h2>
      </div>
      <div class="insurance-content">
        <van-cell-group>
          <van-cell title="医保类型" value="基本医疗保险" />
          <van-cell title="起付标准" value="一级医院100元" />
          <van-cell title="报销比例" value="在职75%-90%，退休80%-95%" />
          <van-cell title="门诊限额" value="年度限额6978元" />
        </van-cell-group>
        <div class="insurance-tips">
          <van-icon name="info-o" color="#1989fa" />
          <span>医保报销范围以医保政策为准，详情咨询0755-87654321</span>
        </div>
      </div>
    </div>

    <!-- 交通指南 -->
    <div class="section">
      <div class="section-header">
        <van-icon name="location-o" class="section-icon" />
        <h2>交通指南</h2>
      </div>
      <div class="transport-guide">
        <van-image
            src="https://map.baidu.com/staticimage?center=114.123,22.456&zoom=17&markers=114.123,22.456&width=600&height=300"
            radius="8"
        />
        <van-tabs>
          <van-tab title="地铁">
            <div class="transport-detail">
              <van-icon name="subway" size="20" color="#1E88E5" />
              <p>地铁3号线医院站C出口，步行约200米</p>
            </div>
          </van-tab>
          <van-tab title="公交">
            <div class="transport-detail">
              <van-icon name="bus" size="20" color="#FF5722" />
              <p>123路、456路、789路公交车华侨医院站下车</p>
            </div>
          </van-tab>
          <van-tab title="自驾">
            <div class="transport-detail">
              <van-icon name="car-o" size="20" color="#4CAF50" />
              <p>医院地下停车场（B2-B3层），5元/小时，每日封顶40元</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
  {{userStore.userInfo}}


</template>

<script  setup>
import {getCurrentInstance,onMounted,ref, computed} from "vue";
import {useUserStore} from "../stores/user.js";
let userStore = useUserStore();

const {proxy}=getCurrentInstance();
const init=()=>{
  proxy.$axios.get("/api/v1/patient/count",{params:{user_id:userStore.userInfo.user_id}})
      .then((serverData)=>{
        if(serverData.data.code==0){
          userStore.userInfo.count=serverData.data.data;
        }
      })
  proxy.$axios.get("/api/v1/patient/getDefault",{params:{user_id:userStore.userInfo.user_id}})
      .then((serverData)=>{
        if(serverData.data.code==0){
          userStore.defaultPatient=serverData.data.data;
        }
      })



}
onMounted(()=>{

  init();
})


const searchText = ref('');
const activeDept = ref([]);
const activeFaq = ref([]);
const activeStep = ref(0);

const departments = ref([
  {
    id: 1,
    name: '内科',
    children: [
      { id: 101, name: '心血管内科', intro: '高血压、冠心病、心律失常等' },
      { id: 102, name: '消化内科', intro: '胃炎、胃溃疡、肝炎等' },
      { id: 103, name: '呼吸内科', intro: '感冒、肺炎、哮喘等' }
    ]
  },
  {
    id: 2,
    name: '外科',
    children: [
      { id: 201, name: '普通外科', intro: '阑尾炎、疝气、甲状腺等' },
      { id: 202, name: '骨科', intro: '骨折、关节炎、脊柱疾病等' },
      { id: 203, name: '神经外科', intro: '脑外伤、脑肿瘤等' }
    ]
  },
  {
    id: 3,
    name: '妇产科',
    children: [
      { id: 301, name: '妇科', intro: '月经不调、妇科炎症等' },
      { id: 302, name: '产科', intro: '产前检查、分娩等' }
    ]
  },
  {
    id: 4,
    name: '儿科',
    children: [
      { id: 401, name: '小儿内科', intro: '儿童感冒、发烧等' },
      { id: 402, name: '新生儿科', intro: '新生儿疾病、早产儿等' }
    ]
  }
]);

const filteredDepartments = computed(() => {
  if (!searchText.value) return departments.value;

  return departments.value
      .filter(dept =>
          dept.name.includes(searchText.value) ||
          dept.children.some(sub =>
              sub.name.includes(searchText.value) ||
              sub.intro.includes(searchText.value)
          )
      )
      .map(dept => ({
        ...dept,
        children: dept.children.filter(sub =>
            sub.name.includes(searchText.value) ||
            sub.intro.includes(searchText.value)
        )
      }));
});

const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
};
</script>

<style scoped>
.guide-container {
  padding: 12px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.guide-header {
  text-align: center;
  margin-bottom: 16px;
}

.guide-header h1 {
  font-size: 22px;
  color: #1E88E5;
  margin-bottom: 8px;
}

.hospital-info {
  font-size: 14px;
  color: #666;
}

.announcement {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
}

.quick-nav {
  background: white;
  border-radius: 12px;
  padding: 12px 0;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  margin-left: 8px;
  color: #333;
}

.section-icon {
  color: #1E88E5;
  font-size: 20px;
}

.process-steps {
  padding: 0 8px;
}

.process-steps h3 {
  font-size: 16px;
  color: #1E88E5;
  margin-bottom: 8px;
}

.step-content {
  padding-left: 12px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.step-content ul, .step-content ol {
  padding-left: 20px;
  margin: 8px 0;
}

.tips {
  margin-top: 16px;
  padding: 8px 12px;
  background-color: #f0f7ff;
  border-radius: 6px;
  font-size: 13px;
  color: #1E88E5;
  display: flex;
  align-items: center;
}

.tips .van-icon {
  margin-right: 4px;
}

.dept-category {
  margin-top: 12px;
}

.transport-guide {
  margin-top: 12px;
}

.transport-detail {
  padding: 16px;
  display: flex;
  align-items: center;
}

.transport-detail .van-icon {
  margin-right: 8px;
}

.transport-detail p {
  margin: 0;
  font-size: 14px;
}

.insurance-content {
  margin-top: 12px;
}

.insurance-tips {
  margin-top: 12px;
  padding: 8px;
  background-color: #f0f7ff;
  border-radius: 6px;
  font-size: 13px;
  color: #1E88E5;
  display: flex;
  align-items: center;
}

.insurance-tips .van-icon {
  margin-right: 4px;
}

.van-cell__title {
  font-weight: bold;
}

.van-collapse-item__content {
  padding: 0;
}
</style>
